<template>
  <CommonCard :title="`今日订单`" :value="orderToday">
    <!-- 1.在视图中确定容器 -->
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
    <template v-slot:bottom>
      <span>昨日订单量</span>
      <span class="emphasis">{{ orderLastDay }}</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TodayOrders",
});
</script>

<script setup lang="ts">
//引入store
import useDataState from "@/stores/resportData";
//引入计算属性
import { computed, ref, onMounted, watch } from "vue";

//2.引入echarts对象，使用echarts对象提供的init方法
import { $echarts } from "@/plugins/echarts";

//得到store对象
const dataStore = useDataState();

//得到所需要的数据
const orderToday = computed(() => dataStore.reportData.orderToday as number);
const orderLastDay = computed(
  () => dataStore.reportData.orderLastDay as number
);
const orderTrend = computed(() => dataStore.reportData.orderTrend || []);
const orderTrendAxis = computed(
  () => dataStore.reportData.orderTrendAxis || []
);
//3. 获取Chart容器DOM，为了方便在当前容器中配置echarts
const chartRef = ref();

//4. 进行echarts图标配置
const getOption = () => {
  return {
    //x轴的配置
    xAxis: {
      boundaryGap: false, // 两侧不留空白
      data: orderTrendAxis.value, // x轴数据列表
    },
    //y轴的配置
    yAxis: {
      show: false, // 不显示y轴及标线
    },
    //图标内容的详细配置,是一个数组,因为图标可能是多个图(比如多条折线)
    series: [
      {
        //图标名称
        name: "实时订单数",
        //图标的类型:line代表折线图
        type: "line",
        // 列表数据(和x轴数据进行对应)
        data: orderTrend.value,
        // 线条光滑(失去了折线的棱角)
        smooth: true,
        // 区域的样式(折线内部的区域样式)，不配置就没有
        areaStyle: {
          color: "red",
          opacity: ".5",
        },
        // 折线点的样式
        itemStyle: {
          // opacity: 0,
        },
        // 线的样式
        lineStyle: {
          opacity: 1,
          color: "blue",
        },
      },
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 显示提示
    tooltip: {
      /* 触发条件,折线图使用axis 饼状图用item */
      trigger: "axis",
      // 是否将 tooltip 框限制在图表的区域内
      confine: true,
    },
  };
};

let chart: any;
onMounted(() => {
  //5.在mounted中把Chart容器进行初始化
  chart = $echarts.init(chartRef.value);
  //6.把配置交给已经初始化echarts容器
  chart.setOption(getOption());
});

//7.因为数据是异步获取的，所以我们要监视echarts数据的变化，然后再次给echarts传入配置
watch(orderToday, () => {
  chart.setOption(getOption());
});
</script>
